<template>
  <div>
    <div style="height: 7vh"></div>
      <section class="goods-container" v-show="isShow">
        <header>
          <div class="package-fee">
            <h2 class="title">已选商品</h2>
            <span class="package">包装费<span class="emphasize">{{ packingFee }}元</span></span>
          </div>
          <span class="clear"><i class="el-icon-delete"></i>清空</span>
        </header>
        <div class="goods-list">
          <div class="goods-item" v-for="(item,index) in currentCartList" :key="index">
            <div class="goods">
              <img :src="imgBaseUrl + item.img" class="cover">
              <div class="info">
                <h2 class="title">{{item.name}}</h2>
                <span class="value">￥{{item.price}}</span>
              </div>
            </div>
            <div class="number">
              <div class="info-count">
                <i class="el-icon-remove-outline"></i>
                <p class="number">{{item.num}}</p>
                <i class="el-icon-circle-plus-outline"
                   @click="addCart(
                   food.category_id,food.item_id,food.specfoods[0].food_id,food.image_path,
                   food.specfoods[0].name,food.specfoods[0].price,'',food.specfoods[0].packing_fee,
                   food.specfoods[0].sku_id,food.specfoods[0].stock,$event)"></i>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section class="cart-container">
        <div class="value-container">
          <div class="cover" @click="isShow = !isShow">
            <i class="el-icon-s-goods"></i>
            <span class="cart-number" v-if="currentCartList.length !== 0">{{ currentCartList.length }}</span>
          </div>
          <div class="text">
            <span class="value">￥9.5</span>
            <span class="message">免配送费</span>
          </div>
        </div>
        <div class="order-container">
        <span class="title">
          差￥10.5元起送
        </span>
        </div>
      </section>
    {{currentCartList}}
  </div>
</template>

<script lang="ts">
import {Component, Prop, Vue, Watch} from 'vue-property-decorator';
import {Mutation, State} from "vuex-class";
import {IcartList} from "@/utils/utilsType";
import {set} from "lodash";
const namespace = "profile"
@Component({})
export default class cartCom extends Vue {
  @State('cartList',{ namespace }) cartList !: IcartList[];
  @Prop() restaurant_id !: number;
  @Prop() currentCartList !: IcartList[];
  private imgBaseUrl:string = '//elm.cangdu.org/img/';  //图片地址
  private isShow = false as boolean;
  @Mutation('ADD_CART', { namespace }) ADD_CART: any
  @Mutation('REDUCE_CART', { namespace }) REDUCE_CART: any
  mounted(){
    //@ts-ignore
    // this.$bus.$on('hello',(data:any)=>{
    //   console.log('我是学校，收到了学生传过来的数据',data)
    // })
  }
/**
  * @description: 监视store中的cartList的变化，改变时当前的cartList也会发生变化
  * @return {}
  */
  // @Watch('cartList',{deep: true})
  // private showCart(){
  //     console.log(this.cartList[this.restaurant_id])
  //     this.currentCartList = this.squashObj(this.cartList[this.restaurant_id]);
  //     console.log(
  //       this.currentCartList
  //     )
  // }
/**
 * @description: 对象拍平算法
 * @return {}
 */
  private squashObj(obj:object){
    let newArray: IcartList[] = []
    function format(o: object) {
      for (let key in o) {
        //如果他包含属性
        if(o[key]){
          if ('id' in o[key]) {
            newArray.unshift(o[key])
          }else {
            //如果他包含属性，直接放到数组里
            format(o[key])
          }
        }
      }
    }
    format(obj)
    return newArray;
  }
/**
  * @description: computed函数，用来计算打包费
  * @return {}
  */
  get packingFee(){
    let packingFee = 0;
    this.currentCartList.forEach((item:IcartList)=>{
      packingFee += item.packing_fee;
    })
    return packingFee;
  }

  /**
   * @description: 添加购物车操作
   * @return {}
   */
  addCart(category_id:number, item_id: number, food_id:number,food_img:string, name: string, price:number, specs: string, packing_fee:number, sku_id: number, stock:number , event:any){
    this.ADD_CART({restaurant_id: this.restaurant_id, category_id, item_id, food_id, food_img,name, price, specs, packing_fee, sku_id, stock});
    // let elLeft = event.target.getBoundingClientRect().left;
    // let elBottom = event.target.getBoundingClientRect().bottom;
    // this.showMoveDot.push(true);
    // this.$emit('showMoveDot', this.showMoveDot, elLeft, elBottom);
  }
  /**
   * @description: 移除购物车操作
   * @return {}
   */
  removeCart(category_id:number, item_id: number, food_id:number){
    // if (this.foodNum > 0) {
    // console.log({category_id, item_id, food_id})
    this.REDUCE_CART({restaurant_id:this.restaurant_id,category_id, item_id, food_id});
    // }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">

.goods-container {
  width: 100%;
  position: fixed;
  bottom: 7vh;
  left: 0;
  z-index: 999;
  background-color: #ffffff;
  header {
    display: flex;
    justify-content: space-between;
    padding: 0.4em 0.5em;
    .package-fee {
      display: flex;
      align-items: center;
      .title {
        font-size: medium;
        margin: 0;

      }
      .package {
        color: #9e9e9e;
        margin-left: 1em;
        .emphasize {
          color: #ec5e3a;
        }
      }
    }

    .clear {
      color: #9e9e9e;
      margin: 0.5em;
      .el-icon-delete {
        margin-right: 0.2em;
      }
    }
  }
  .goods-list {

    .goods-item {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      .goods {
        margin-left: 2vw;
        display: flex;
        .cover {
          margin: 2vw;
          border-radius: 2vw;
          width: 14vw;
          height: 14vw;
        }
        .info {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          .title {
            margin: 0;
            font-size: small;
          }
          .value {
            color: #ec5e3a;
          }
        }
      }
      .number {
        .info-count {
          text-align: center;
          display: inline-flex;
          align-items: center;
          margin-right: 1em;
          .el-icon-remove-outline {
            color: #55b5f7;
            font-size: 2em;
          }
          .el-icon-circle-plus-outline {
            font-size: 2em;
            color: #55b5f7;
          }
          .el-icon-circle-plus {
            font-size: 2em;
            color: #55b5f7;
          }
          .number {
            color: #55b5f7;
            margin: 0 6px;
            font-size: 1em;
          }
        }
      }
    }
  }
}
.cart-container {
  box-sizing:border-box;
  -moz-box-sizing:border-box; /* Firefox /
  -webkit-box-sizing:border-box; / Safari */
  width: 100%;
  height: 7vh;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  background-color: #fbfbfb;
  padding: 1vw 4vw 4vw 4vw;
  .value-container {
    display: flex;
    .cover {
      position: relative;
      .el-icon-s-goods {
        font-size: 40px;
        color: #57bef9;
      }
      .cart-number {
        width: 1em;
        height: 1em;
        font-size: 10px;
        position: absolute;
        vertical-align: center;
        align-items: center;
        top: 0em;
        left: 2.2em;
        border-radius: 50%;
        color: #ffffff;
        background-color: #ec5e3a;
        padding: 4px;
      }
    }
    .text {
      margin-left: 1.5em;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      width: 100%;
      .value {
        font-size: large;
        font-weight: bold;
      }
      .message {
        font-size: small;
        font-weight: lighter;
      }
    }

  }
  .order-container {
    display: flex;
    border-radius: 12em;
    padding: 0 1em;
    align-items: center;
    font-size: medium;
    font-weight: bolder;
    color: #ffffff;
    background-color: #999999;
  }
}
</style>
